<template>
  <div>
    <x-course-list
      :list="list" :total="total" :loading="isLoading" pagination
      :current-page.sync="searchForm.currentPage" :page-size.sync="searchForm.pageSize"
      class="search-course" @change="getList">
      <template #searchText>
        <div class="search-text">以下为<span>{{ searchValue }}</span>的搜索结果：</div>
      </template>
    </x-course-list>
  </div>
</template>

<script>
  import img1 from '../../assets/images/pic_kc1_320x180.png';
  import img2 from '../../assets/images/pic_kc2_320x180.png';
export default {
  name: 'searchList',
  data() {
    let query = this.$route.query;
    return {
      searchForm: {
        currentPage: 1,
        pageSize: 12,
      },
      list: [],
      total: 0,
      isLoading: false,
      searchValue: query.courseTitle
    };
  },
  methods: {
    async getList (page) {
      console.log(1234);
      this.isLoading = true
      if (page === 1) this.searchForm.currentPage = 1;
      this.searchForm.courseTitle = this.$route.query.courseTitle;
      const { data, total } = await this.Request.courseOverview({ params: this.searchForm });
      this.list = data;
      this.total = total;
      this.isLoading = false
    },
  },
  watch: {
    '$route.query': {
      handler(newValue, oldValue) {
        this.getList(1)
      },
      deep: true
    }
  },
  mounted() {
    this.getList(1)
  }
};
</script>

<style lang="scss" scoped>
@import "@/css/variable.scss";
.search-course{
  height: calc(100vh - 0.8rem);
  overflow-y: auto;
}
.search-text{
  /*width: 9.6rem;*/
  padding: 0 0.5rem;
  margin: 0.2rem auto;
  color: #666666;
  span{
    font-size: 0.113rem;
    color: #333333;
    margin: 0 0.066rem;
  }
}
.search-list-total-result {
  font-size: 0.2rem;
  font-weight: 500;
  color: $white5;
  span {
    color: $blue6;
  }
}
</style>
